<template>
    <div class="manage-index">
        <div class="top">
            <h3>XX数据平台</h3>
        </div>
        <date-picker @changeDate="dateFn" />
        <div class="bottom">
            <div class="left">
                <div class="item">
                    <dv-border-box-1>
                        <Pie></Pie>
                        <!-- <div id="main" style="width:80%;height:80%;padding:10px"></div> -->
                    </dv-border-box-1>
                </div>  
                <div class="item">
                    <!-- <dv-border-box-10>
                    </dv-border-box-10> -->

                </div>
                <div class="item">
                    <dv-border-box-6>dv-border-box-10</dv-border-box-6>
                </div>
            </div>
            <div class="middle">
                 <div class="item">
                    <dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11>
                </div>  
            </div>
             <div class="right">
                 <div class="item">
                    <dv-border-box-8 :reverse="true">dv-border-box-8</dv-border-box-8>
                </div>  
            </div>
           
        </div>
        
    </div>
</template>

<script>
import * as echarts from 'echarts';
import Pie from './manage/Pie.vue'
import DatePicker from '../components/DatePicker.vue'

export default ({
  data() {
    return{

    }
  },
  components:{
      Pie,
      DatePicker
  },
   mounted(){

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: '60%',
            textStyle: {
            color: "#fff"
            }
            // left: 'center'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            left: '-40%',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
            }
        ]
}       ;

        option && myChart.setOption(option);

    },
    methods:{
        dateFn(data){
            console.log(2222,data)
        }
    }
})
</script>

<style lang="less" scoped>
// @import "../styles/skin";
.manage-index{
    .top{
        width: 100%;
        height: 50px;
        margin: 10px 0 20px;
        position: relative;
        &::before{
            content: '';
            background: url(../assets/images/right_header.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 60%;
            height: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
        }
        &::after{
            content: '';
            background: url(../assets/images/left_header.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 60%;
            height: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
        }
        h3{
            font-size: 29px;
            font-weight: 800;
            width: 100%;
            text-align: center;
            padding-top: 10px;
        }
    }
    .bottom{
        height: calc(100vh-100px);
        width: 100%;
        display: flex;
        justify-content: space-around;
        // align-items: center;
        .item{
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
            color: @nice-blue;
        }
        .left{
            width: 27%;
        }
        .middle{
            width: 44%;
            .item{
                height: 400px;
            }
        }
        .right{
            width: 27%;
        }
        
    }
}
</style>
